<template>
  <div class="detailContainer">
    <div class="header">
      <van-nav-bar :title="title">
        <template #left>
          <div class="item">
            <van-icon name="arrow-left" color="white" size="20" @click='backToCategory'/>
          </div>
          <!-- <van-button round type="default" color='rgba(0, 0, 0, 0.4)' size="small"> < </van-button> -->
        </template>
        <template #right>
          <div class="item">
            <van-icon name="share-o" color="white" size="20" @click='toShare'/>
          </div>
          <div class="item">
            <van-icon name="shopping-cart-o" color="white" size="20" @click='toShoppingCart' />
          </div>
          <!-- <div class="item">
            <van-icon name="ellipsis" color="white" size="22" />
          </div> -->
        </template>
      </van-nav-bar>
    </div>
    <div class="picContainer">
      <img src="../images/jianguo4.jpg" alt="" />
    </div>
    <div class="priceArea">
      <div class="priceArea1">
        <div class="price">
          <i>¥</i>
          <em>999</em>
          <span class="minus">降价通知</span>
        </div>
        <div class="remark">
          <i>累计评价</i>
          <em class="remarkRight">65545</em>
        </div>
      </div>
      <div class="productTitle">
        <van-tag color="#7232dd" size="medium">当季新品</van-tag>
        <p>中粮坚果腰果扁桃仁混合坚果</p>
      </div>
    </div>
    <div class="productDetail">
      <ul class="productDetailItem">
        <li class="item left">选择</li>
        <li class="item">化妆品净含量</li>
        <i class="right">></i></i>
      </ul>
      <ul class="productDetailItem">
        <li class="item left">保障</li>
        <li class="item">假一赔四·过敏包退·退货运费险</li>
        <i class="right">></i></i>
      </ul>
      <ul class="productDetailItem">
        <li class="item left">参数</li>
        <li class="item">品牌 单品...</li>
        <i class="right">></i></i>
      </ul>
    </div>
    <div class="bottomCart">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toShoppingCart" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
/>
  </div>
</template>

<script>
// 引入vuex辅助函数
import { mapState } from "vuex";
export default {
  name: "Detail",
  data() {
    return {
      title: "", // 父组件传递的标题
      showShare: false, // 是否显示分享菜单
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],    // 分享菜单的数据
    };
  },
  mounted() {
    // 更新路由跳转时父组件传递的数据
    this.title = this.$route.query.text;
  },
  methods: {
    // 获取详情页数据的回调
    ...mapState({
      detailList:state => state.category.categoryList
    }),
    // 点击去购物车的回调
    toShoppingCart() {
      this.$router.push("/cart");
    },
    // 点击回分类页的回调
    backToCategory() {
      this.$router.back();
    },
    // 展示分享面板
    toShare() {
      this.showShare = true
    },
  },
};
</script>

<style scoped>
.detailContainer {
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
}
.header .back {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  margin-left: 10px;
}
.header .item {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 图片的样式 */
.picContainer img {
  width: 100%;
  /* height: 100%; */
  height: 10rem;
}
/* 价格区域 */
.priceArea {
  box-sizing: border-box;
  width: 95%;
  height: 3rem;
  border-radius: 5px;
  background-color: #fff;
  margin: 0 10px;
  padding: 10px;
}
.priceArea .priceArea1 {
  overflow: hidden;
}
.priceArea .priceArea1 .price {
  height: 30px;
  float: left;
  font-size: 24px;
  color: rgb(226, 105, 5);
}
.priceArea .priceArea1 .price .minus {
  font-size: 14px;
  padding-left: 5px;
}
.priceArea .priceArea1 .remark {
  height: 30px;
  float: right;
  font-size: 12px;
  line-height: 30px;
}
.priceArea .priceArea1 .remark .remarkRight {
  font-size: 12px;
  padding-left: 3px;
  font-weight: bold;
}
.productTitle {
  width: 100%;
}
.productTitle p {
  display: inline-block;
  padding-left: 5px;
  font-size: 16px;
  color: #333;
  line-height: 10px;
}
.productDetail {
  box-sizing: border-box;
  width: 95%;
  height: 4rem;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff;
  margin: 10px;
  padding: 10px;
}
.productDetailItem {
  overflow: hidden;
  height: 30px;
}
.productDetailItem .item {
  float: left;
}
.productDetailItem .left {
  width: 50px;
  margin-right: 10px;
}
.productDetailItem .right {
  float: right;
}
</style>